<template>
  <div class="buttomCpn">
    <ul>
      <li
        v-for="item in list"
        :key="item.id"
        @click="changeData(item.id)"
        :class="seleted == item.id ? 'color' : ''"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "一句毒鸡汤" },
        { id: 2, name: "古诗词句" },
        { id: 3, name: "励志句子" },
        { id: 4, name: "生产技术" },
      ],
      seleted: 1,
    };
  },
  methods: {
    changeData(id) {
      this.seleted = id;
      if (id === 1) {
        this.$router.push("/right2");
      } else if (id === 2) {
        this.$router.push("/right3");
      } else {
        this.$router.push("/right4");
      }
    },
  },
};
</script>

<style scoped>
.buttomCpn {
  color: rgb(206, 204, 204);
  text-align: center;
}
ul {
  list-style: none;
}
ul li {
  margin: 10px 0;
}
li:hover {
  color: white;
}
.color {
  color: #4caf54;
}
</style>
